<template>
    <div id="cash" :style="{height:height+'px'}">
        <cube-scroll :options="scroll_options">

            <!--S头部提现-->
            <div id="header" ref="header">
                <h2><svg class="icon"><use xlink:href="#icon-yue2"></use></svg></h2>
                <h3>￥{{balance}}</h3>
                <cube-button class="button" :primary="true" @click="clickCashBtn">提现</cube-button>
            </div>
            <!--E头部提现-->

            <!--S提现列表、组件-->
            <cashList></cashList>
            <!--E提现列表、组件-->

            <!--遮罩层--><shade v-if="cashing" :opacity="0"></shade>

        </cube-scroll>
    </div>
</template>

<script>
    import cashList from "./components/castList/CastList";
    import shade from "../../../../components/shade/Shade";
    export default {
        name: "cash",
        data(){
            return {
                height:0,
                scroll_options:{
                    scrollbar:true
                },
                balance:'',
                min_money:0.3,   //最小提现金额
                cashing:false   //是否正在提现中
            }
        },
        components:{
            cashList,
            shade
        },
        created(){
          this.minMoney();
          this.getBalance();
        },
        mounted() {
            this.height = document.documentElement.clientHeight;
        },
        methods:{
            /**
             * 获取用户余额
             */
            getBalance(){
                this.$url('member/easyFind',{
                    return:['balance']
                })
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.balance = res.data.data.balance;
                        }
                    });
            },
            /**
             * 获取参数，最小提现金额
             */
            minMoney(){
                this.$url('setting/easyFind',{
                    return:['lowest_cash']
                })
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.min_money = res.data.data.lowest_cash;
                        }
                    });
            },
            //点击提现按钮
            clickCashBtn(){
                let dialog = this.$createDialog({
                    type: 'confirm',
                    title: '提现',
                    icon: 'cubeic-safe-pay',
                    content:`<input type="text" id="cash-input" placeholder="请输入提现金额" autocomplete="off" />`,
                    showClose:true,
                    cancelBtn:{
                      text:"全部提现",
                      active: true
                    },
                    onConfirm:(ev)=>{
                        this.cash(ev.target.parentNode.parentNode.querySelector("input").value);
                    },
                    onCancel:(ev)=>{
                        //全部提现
                        ev.target.parentNode.parentNode.querySelector("input").value = this.balance;
                        dialog.show();
                    }
                });
                dialog.show();
                this.$nextTick(()=>{
                    document.querySelector("#cash-input").addEventListener("blur",()=>{
                        window.scroll(0,0);
                    });
                });
            },
            /**
             * 确认提现
             * @param money 提现金额
             */
            cash(money){
                if(!this.checkMoney(money)) return;
                this.cashing = true;
                this.$url('cash/cash',{
                    money
                })
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.$createToast({
                                time: 1500,
                                txt: res.data.auto ? '提现成功' : '提现成功,等待审核',
                                type:'correct',
                                mask:true
                            }).show();
                            //window.console.log(document.documentElement.querySelector("#cash #cash-input"));
                            document.querySelector("#cash-input").value = "";
                            this.getBalance();
                        }else{
                            this.$createToast({
                                time: 1500,
                                txt: res.data.err_msg,
                                type:'warn',
                                mask:true
                            }).show();
                        }
                        this.cashing = false;
                    });
            },
            /**
             * 提现金额变化
             */
            checkMoney(money){
                if(money < parseFloat(this.min_money)){
                    this.$createToast({
                        time: 1500,
                        txt: '提现金额不能小于'+this.min_money+'元',
                        type:'warn',
                        mask:true
                    }).show();
                    return false;
                }
                if(parseFloat(money) > this.balance){
                    this.$createToast({
                        time: 1500,
                        txt: '余额不足~',
                        type:'warn',
                        mask:true
                    }).show();
                    return false;
                }
                if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(money)){
                    this.$createToast({
                        time: 1500,
                        txt: '请输入正确的提现金额',
                        type:'warn',
                        mask:true
                    }).show();
                    return false;
                }
                return true;
            }
        }
    }
</script>

<style scoped lang="less" src="./cash.less"></style>

<style lang="stylus">
    #cash-input
        width 100%
        height 40px
        box-sizing border-box
        border 1px solid #f6f6f6
        padding-left 5px
        background #FFFFFF
        -webkit-appearance none
        outline none
        color #2f2f2f
</style>
